<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button
          @click="exportExcel()"
          :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''"
        >导出</el-button>
        <el-button
          :disabled="!buttonsPermissions.DaYin"
          :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint"
        >打印(P)</el-button>
        <el-checkbox v-model="isShowHcdj">隐藏红冲单据</el-checkbox>
      </div>
      <div class="btn_right">
        <!-- <el-input v-model="queryData.keywords" placeholder="请输入单据编号\往来单位名称\关键字搜索"></el-input>
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>-->
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <p>{{ goodsName }}</p>
            <p>此前库存 ({{ preDate }}) : {{ preNumber }}</p>
            <p>期末库存 ({{ finalDate }}) : {{ finalNumber }}</p>
          </div>
          <div class="screen_right">
            <el-select @change="changeDate" v-model="monthValue">
              <el-option
                v-for="item in monthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-date-picker
              v-if="isShowDate"
              v-model="nowDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onClickPicker"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-button type="primary" @click="onQuery">查询</el-button>
          </div>
        </div>
        <div class="table_content">
          <el-table
            show-summary
            border
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
            color: '#666666',
            textAlign: 'center',
            height: '30px',
            borderColor: '#dddddd',
          }"
            :data="tableData"
            height="100%"
            ref="tableData"
            @row-dblclick="handleRowDbclick"
            style="width: 100%"
          >
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                border
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                min-width="120px"
                :resizable="item.props=='goodsName'?true:false"
                :sortable="item.sortable"
                :width="item.props == 'xh' ? '50px' : item.cellWidth"
              >
            <template slot-scope="scope">
              <span v-if="item.props == 'goodsName'" style="width: 100%; white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; text-align: left;">{{ scope.row[item.props] }}</span>
              <span v-else>{{ scope.row[item.props] }}</span>
            </template>
          </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryData.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="queryData.pageSize"
              layout="jumper, prev, pager,next, sizes"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      orderType="库存变动明细"
      :defaultColumnDataArr="defaultColumnData"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 新增树形结构数据弹框 -->
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { dateStrFromDate } from '@/utils/DateFormatter'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, formatMoney, formatPrice, formatNumber, delcommafy } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { toBillDetail } from '@/utils/billUtil'
export default {
  name: 'inventoryChangeDetails',
  components: {
    CConfiguration,
    dialogPrint,
  },
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions () {
      return handlePermissions('库存变动明细')
    },
    printPermissions () {
      return handleOtherPerms('单据可多次打印')
    },
  },
  mixins: [JeecgListMixin],
  created () {
    this.monthValue = '本月'
    this.getTimeRange(this.$setTimeRange(5))
    if (this.$route.params.goodsId) {
      this.goodsId = this.$route.params.goodsId
      this.goodsName = this.$route.params.goodsName
      this.storehouseId = this.$route.params.storehouseId
      this.storehouseName = this.$route.params.storehouseName
    }
  },
  updated () {
    this.$nextTick(() => {
      this.$refs.tableData.doLayout()
    })
  },
  watch: {
    // 路由变化时，更新数据
    $route: {
      immediate: true,
      handler (val) {
        if (val.name === 'reportStatistics-inventoryReport-inventoryChange') {
          if (!this.queryData.startDate) {
            this.monthValue = '本月'
            this.getTimeRange(this.$setTimeRange(5))
          }
          const id = val.params.goodsId
          const sId = val.params.storehouseId
          if ((id && id != this.goodsId) || sId != this.storehouseId) {
            this.queryData.pageNo = this.$options.data().queryData.pageNo
            this.queryData.pageSize = this.$options.data().queryData.pageSize
            this.total = 0
            this.goodsId = id
            this.goodsName = val.params.goodsName
            this.storehouseName = val.params.storehouseName
            this.storehouseId = sId
            this.onQuery()
          }
        }
      }
    },
    isShowHcdj () {
      this.onQuery()
    },
  },
  data () {
    return {
      // 查询条件数据
      queryData: {
        //搜索框值
        keywords: '',
        // 日期选择范围
        startDate: '',
        finishDate: '',
        pageSize: 20, //每页的数据条数
        pageNo: 1, //默认开始页面
      },
      storehouseId: '',
      storehouseName: '',
      // 直接触发
      isShowHcdj: false,
      monthValue: '本月',
      monthOptions: [
        {
          value: '今日',
          label: '今日',
        },
        {
          value: '本周',
          label: '本周',
        },
        {
          value: '本月',
          label: '本月',
        },
        {
          value: '本年',
          label: '本年',
        },
      ],
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: [],
      columnData: [
        {
          morenName: '序号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: true,
          cellWidth: '50px',
          props: 'xh',
        },
        {
          morenName: '审核日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          cellWidth: '150px',
          props: 'checkDate',
        },
        {
          morenName: '单据日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          cellWidth: '150px',
          props: 'createOrderDate',
        },
        {
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          cellWidth: '100px',
          props: 'billType_dictText',
        },
        {
          morenName: '单据编号',
          zidingyiName: '',
          morenState: true,
          sortable: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '150px',
          props: 'billNumber',
        },
        {
          morenName: '仓库',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          sortable: true,
          noModify: false,
          cellWidth: '150px',
          props: 'storehouseId_dictText',
        },
        {
          morenName: '补单',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '80px',
          props: 'isReplacementOrder_dictText',
        },
        {
          morenName: '商品编码',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          sortable: true,
          noModify: false,
          cellWidth: '150px',
          props: 'goodsNumber',
        },
        {
          morenName: '商品名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          sortable: true,
          noModify: false,
          cellWidth: '150px',
          props: 'goodsName',
        },
        {
          morenName: '规格',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'norms',
        },
        {
          morenName: '单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'unit',
        },
        {
          morenName: '入库数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          sortable: true,
          noModify: false,
          cellWidth: '100px',
          props: 'inNumber',
        },
        {
          morenName: '出库数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          sortable: true,
          noModify: false,
          cellWidth: '100px',
          props: 'outNumber',
        },
        {
          morenName: '库存余量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          cellWidth: '100px',
          props: 'opNumber',
        },
        {
          morenName: '数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          sortable: true,
          noModify: false,
          cellWidth: '100px',
          props: 'number',
        },
        // {
        //   morenName: '辅助单位数量',
        //   zidingyiName: '',
        //   morenState: true,
        //   zidingyiState: true,
        //   noModify: false,
        //   cellWidth: '100px',
        //   props: 'baseUnitNumber',
        // },
        {
          morenName: '单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'singlePrice',
        },
        {
          morenName: '金额小计',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'sumPrice',
        },
        {
          morenName: '基本单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'baseUnit_dictText',
        },
        {
          morenName: '折算数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'zsNumber',
        },
        {
          morenName: '运费',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'transportFee',
        },
        {
          morenName: '成本价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'costPrice',
        },
        {
          morenName: '成本金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'sumCostPrice',
        },
        {
          morenName: '单据状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'billStatus_dictText',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'remark',
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'sysUserId_dictText',
        },
      ],
      defaultColumnData: [],// 默认列配置
      columnKey: '库存变动明细',// 列配置的标识key
      updateId: '', // 修改列配置时返回的id
      goodsId: '', // 商品ID
      goodsName: '', // 商品名称
      total: 0, // 总条数
      preNumber: 0, // 此前库存
      finalNumber: 0, // 期末库存
      preDate: '', // 此前日期
      finalDate: '', // 期末日期
      url: {
        exportXlsUrl: '/xghStorehouseGoods/xghStorehouseGoods/storehouseChangeDetailExportXls'
      }, // 导出地址
      billName: '库存变动明细',
    }
  },
  mounted () {
    // 初始化列配置数据
    this.defaultColumnData = JSON.parse(JSON.stringify(this.columnData))
    this.selectTitle()
  },
  methods: {
    // 打印
    async handleShortcutKeyPrint () {
      // 查询
      let obj = {
        ...this.queryData,
        storehouseId: this.storehouseId,
        goodsId: this.goodsId,
        showFlag: this.isShowHcdj ? '0' : '1', //0-不显示 1-显示
        pageNo: 1,
        pageSize: 1000000,
      }
      let printExclusive = []
      let res = await getAction('/xghStorehouseGoods/xghStorehouseGoods/storehouseChangeDetail', obj)
      if (res.code === 200) {
        printExclusive = res.result.records || []
        printExclusive.forEach((item, index) => {
          item.xh = index + 1
        })
      }
      this.onQuery()
      // 打印
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.startDate.split(' ')[0] + '~' + this.queryData.finishDate.split(' ')[0],
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, (() => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            }))
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    // 初始化查询列配置值
    async selectTitle () {
      let obj = await this.$setColumn.selectColumn(this.columnKey)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.columnKey, this.defaultColumnData, 'props')
        this.updateId = id
        this.columnData = this.defaultColumnData
      } else if (obj.code === 404) {
        this.columnData = this.defaultColumnData
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn (value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.columnKey, this.columnData, this.updateId)
      if (res.code == 200) {
        this.showTips(res.message, 0)
      } else {
        this.showTips(res.message, 2)
      }
    },
    // 导出
    exportExcel () {
      const fileName = '库存变动明细'
      let params = {
        ...this.queryData,
        storehouseId: this.storehouseId,
        goodsId: this.goodsId,
        showFlag: this.isShowHcdj ? '0' : '1', //0-不显示 1-显示
        fileName
      }
      this.handleExportXlsByStaff(fileName, params)
    },
    // 刷新
    onRefresh () {
      this.queryData = this.$options.data().queryData
      this.monthValue = '本月'
      this.getTimeRange(this.$setTimeRange(5))
      this.total = 0 // 重置总数为0
      this.requestQuery()
    },
    // 查询
    onQuery () {
      this.queryData.pageNo = 1
      this.storehouseChangeDetailCount()
      this.requestQuery()
    },
    // 请求筛选条件数据
    requestQuery () {
      let obj = {
        ...this.queryData,
        storehouseId: this.storehouseId,
        goodsId: this.goodsId,
        showFlag: this.isShowHcdj ? '0' : '1' //0-不显示 1-显示
      }
      getAction('/xghStorehouseGoods/xghStorehouseGoods/storehouseChangeDetail', obj).then((res) => {
        if (res.code === 200) {
          this.total = res.result.total
          let data = res.result.records || []
          data.forEach((item, index) => {
            item.xh = index + 1
            item.inNumber = this.$formatNumber(item.inNumber)
            item.outNumber = this.$formatNumber(item.outNumber)
            item.opNumber = this.$formatNumber(item.opNumber)
            item.number = this.$formatNumber(item.number)
            item.singlePrice = item.singlePrice == '******' ? item.singlePrice : this.$formatPrice(item.singlePrice)
            item.sumPrice = item.sumPrice == '******' ? item.sumPrice : this.$formatMoney(item.sumPrice)
            item.zsNumber = this.$formatNumber(item.zsNumber)
            item.transportFee = this.$formatMoney(item.transportFee)
            item.costPrice = item.costPrice == '******' ? item.costPrice : this.$formatPrice(item.costPrice)
            item.sumCostPrice = item.sumCostPrice == '******' ? item.sumCostPrice : this.$formatMoney(item.sumCostPrice)
          })
          this.tableData = data
        }
      })
    },
    // 库存变动明细-此前库存和期末库存
    storehouseChangeDetailCount () {
      let obj = {
        ...this.queryData,
        storehouseId: this.storehouseId,
        goodsId: this.goodsId,
        showFlag: this.isShowHcdj ? '0' : '1' //0-不显示 1-显示
      }
      getAction('/xghStorehouseGoods/xghStorehouseGoods/storehouseChangeDetailCount', obj).then((res) => {
        if (res.code === 200) {
          this.preDate = this.queryData.startDate.substring(0, 10)
          this.finalDate = this.queryData.finishDate.substring(0, 10)
          this.preNumber = formatNumber(res.result.preNumber)
          this.finalNumber = formatNumber(res.result.finalNumber)
        }
      })
    },
    // 判断当前选择时间段
    changeDate (val) {
      this.isShowDate = true
      switch (val) {
        case '全部':
          this.isShowDate = false
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange (data) {
      this.nowDate = [data.now, data.end]
      this.queryData.startDate = data.now + ' 00:00:00'
      this.queryData.finishDate = data.end + ' 23:59:59'
    },
    /**
    * 处理表格每一个行
    */
    handleRowDbclick (row) {
      toBillDetail(this, row.billType, row.id)
    },
    // 获取当前选中时间
    onClickPicker (val) {
      this.queryData.startDate = val[0] + ' 00:00:00'
      this.queryData.finishDate = val[1] + ' 23:59:59'
    },
    // 触发列配置弹框
    onShowColumn () {
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 合计列计算
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else if (column.property === 'inNumber' || column.property === 'outNumber' ||
          column.property === 'opNumber' || column.property === 'number' ||
          column.property === 'sumPrice' || column.property === 'sumCostPrice' ||
          column.property === 'transportFee' || column.property === 'zsNumber') {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (['inNumber', 'outNumber', 'opNumber', 'number', 'zsNumber'].includes(column.property)) {
              sums[index] = formatNumber(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
            } else {
              sums[index] = formatMoney(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
            }
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.queryData.pageSize = val
      this.onQuery()
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.queryData.pageNo = val
      this.requestQuery()
    },
    showTips (msg, type = 1) {
      switch (type) {
        case 0:
          this.$elMessage.success(msg)
          break;
        case 1:
          this.$elMessage.warning(msg)
          break;
        case 2:
          this.$elMessage.error(msg)
          break;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
$font-size: 12px;
$height-input: 30px; //0.55rem的高度
$height: 50px; //1rem的高度

.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: $height;
  display: flex;
  align-items: center;

  ::v-deep .el-button {
    width: 80px;
    height: $height-input;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size;
    border-radius: 0.1rem;
    border: none;
    margin-right: 6px;
    margin-left: 0;
  }

  .el-button--default {
    color: #666;
  }

  ::v-deep .el-select {
    width: 1rem;
    height: $height-input;
    box-sizing: border-box;
    margin-right: 0.112507rem;

    .el-input {
      .el-input__inner {
        height: $height-input;
        border: none;
        font-size: $font-size;
      }

      .el-input__suffix {
        height: $height-input;
        display: flex;
        align-items: center;
      }
    }
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: $font-size;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox {
      display: flex;
      align-items: center;
      margin-left: 0.168761rem;

      .el-checkbox__input {
        height: 14px;
      }

      .el-checkbox__label {
        font-size: $font-size;
        padding-left: 0.1rem;
        color: #666;
      }

      .is-checked {
        .el-checkbox__inner {
          background: #1a93fa;
          border-color: #1a93fa;
        }
      }
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 4.725295rem;
      height: $height-input;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: $height-input;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: $font-size;
        color: #666;

        &::placeholder {
          font-size: $font-size;
          color: #c1c1c1;
        }
      }
    }

    .el-button {
      width: 1rem;
    }

    .set_up {
      font-size: 20px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 1rem);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .div_screen {
      width: 100%;
      height: 30px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;

      ::v-deep .el-select {
        width: 2.250141rem;
        height: $height-input;
        box-sizing: border-box;
        border-radius: 4px;

        .el-input {
          .el-input__inner {
            height: $height-input;
            border-color: #e3e3e3;
            font-size: $font-size;
            padding-left: 0.15rem;
          }

          .el-input__suffix {
            height: $height-input;
            display: flex;
            align-items: center;
          }
        }
      }

      .screen_left {
        width: 10rem;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        > p {
          height: $height-input;
          display: flex;
          align-items: center;
          font-size: $font-size;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #666666;
          opacity: 1;

          &:nth-child(2) {
            color: #1993fb;
            margin-left: 32px;
          }

          &:nth-child(3) {
            color: #fd6c21;
            margin-left: 52px;
          }
        }
      }

      .screen_right {
        width: calc(100% - 10rem);
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        box-sizing: border-box;

        ::v-deep .el-button {
          width: 60px;
          height: $height-input;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: $font-size;
          border-radius: 0.1rem;
          border: none;
        }

        ::v-deep .el-select {
          width: 80px;
          margin-right: 6px;
        }

        ::v-deep .el-date-editor {
          width: 178px;
          height: $height-input;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 10px;
          padding: 3px 6px;

          .el-range__icon {
            position: absolute;
            right: 0;
            line-height: 30px;
          }

          .el-range-separator {
            line-height: 24px;
          }

          .el-range-input {
            font-size: $font-size;
          }

          .el-range__close-icon {
            display: none;
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 45px - 12px - 66px);
      margin-top: 12px;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            height: $height;
            display: flex;
            align-items: center;
            font-size: $font-size;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }
        }

        th {
          .cell {
            display: block;
            line-height: 50px;
            background: #ededed;
            justify-content: center;
          }
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      width: 100%;
      height: $height-input;
      box-sizing: border-box;
      margin-top: 18px;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: $height-input;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>